<template>
  <div class="a-map-select">
    <a-drawer
      title="坐标拾取"
      :placement="placement"
      :closable="true"
      :destroyOnClose="true"
      width="100%"
      height="100%"
      @close="onClose"
      :zIndex="10001"
      :visible="visible"
      wrapClassName="scoped-drawer"
    >
      <div class="map-wrapper">
        <div id="amap-yykj-container"></div>
        <div class="input-card-map" style="width: 120px" v-if="borderLine">
          <button @click="xxx" class="btn-map" style="margin-bottom: 5px">开始编辑</button>
          <button @click="yyy" class="btn-map">结束编辑</button>
        </div>
        <div class="submit-btn">
          <a-row :gutter="20">
            <a-col :span="4">
              <a-input id="tipinput" placeholder="请输入要搜索的区域名称" v-model="address" />
            </a-col>
            <a-col :span="8" offset="5" v-if="borderLine">
              <div>{{ borderStr }}</div>
              <a-button @click="saveBorderLine" type="primary">保存边界</a-button>
            </a-col>
            <a-col :span="8" offset="5" v-else>
              <a-input placeholder style="width: 200px" v-model="latLng" />
              <a-button @click="onSelect" type="primary">确认选择</a-button>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // areaplace: ''
  },
  data() {
    return {
      placement: 'top',
      polyEditor: null,
      latLng: '',
      address: '',
      borderLine: false,
      borderStr: '',
      // area:this.areaplace
    }
  },
  mounted() {},
  watch: {
    visible: function (newValue) {
      console.log(newValue, '-----------------')
      if (newValue) {
        this.$nextTick(() => {
          this.latLng = ''
          this.address = ''
          this.borderStr = ''
          this.initMap()
        })
      }
    },
    // areaplace(newValue) {
    //   this.area = newValue
    //   console.log(this.area)
    // }
  },
  methods: {
    onClose() {
      this.borderLine = false
      this.$emit('update:visible', false)
    },
    onSelect() {
      this.$emit('getLatLong', this.latLng.split(','))
      //sync的作用  派发事件update:visible会自动更新isShowMap
      this.$emit('update:visible', false)
    },
    handle() {
      this.$emit('newValue', this.area)
    },
    initMap() {
      var clickListener

      var map = new AMap.Map('amap-yykj-container', {
        resizeEnable: true,
        rotateEnable: true,
        expandZoomRange: true,
        zoom: 14,
        zooms: [3, 20],
        center: [108.939621, 34.343147],
      })
      //添加点击事件
      let bindClick = () => {
        clickListener = AMap.event.addListener(map, 'click', (e) => {
          console.log(e, 'eeee')
          this.latLng = `${e.lnglat.lng},${e.lnglat.lat}`
        })
      }

      map.plugin(['AMap.ControlBar'], () => {
        // 添加 3D 罗盘控制
        map.addControl(
          new AMap.ControlBar({
            position: {
              right: '10px',
              top: '10px',
            },
          }),
        )
      })

      bindClick()

      //输入提示
      var autoOptions = {
        input: 'tipinput',
      }
      var auto = new AMap.Autocomplete(autoOptions)
      var placeSearch = new AMap.PlaceSearch({
        map: map,
      })

      //选择地址以后的回调
      var select = (e) => {
        console.log(e, '选择地址后的回调')
        //根据城市code 和城市名称进行查询
        placeSearch.setCity(e.poi.adcode)
        placeSearch.search(e.poi.name) //关键字查询查询
        console.log(this.borderLine)
        if (this.borderLine) {
          var path = [
            [e.poi.location.lng, e.poi.location.lat],
            [e.poi.location.lng + 0.001, e.poi.location.lat + 0.001],
            [e.poi.location.lng + 0.001, e.poi.location.lat - 0.001],
          ]
          renderSearchArea(path)
        }
      }
      //构造地点查询类
      AMap.event.addListener(auto, 'select', select) //注册监听，当选中某条记录时会触发

      //绘制初始的区域边界
      var renderSearchArea = (path) => {
        //创建多边形
        var polygon = new AMap.Polygon({
          path: path,
          strokeColor: '#FF33FF',
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          zIndex: 50,
        })

        map.add(polygon) //将多边形添加到地图
        // 缩放地图到合适的视野级别
        map.setFitView([polygon])

        this.polyEditor = new AMap.PolyEditor(map, polygon)
        this.polyEditor.on('addnode', function (event) {})

        this.polyEditor.on('adjust', function (event) {})

        this.polyEditor.on('removenode', function (event) {})

        this.polyEditor.on('end', (event) => {
          let path = event.target.w.path
          console.log(path)
          let arr = []
          let str = ''
          path.forEach((item, index) => {
            console.log(item, 'item')
            arr.push(`${item.lng},${item.lat}`)
          })
          console.log(arr)
          str = arr.join(';')
          this.borderStr = str
          // event.target 即为编辑后的多边形对象
        })
      }
    },
    xxx() {
      console.log(this.address)
      if (this.address != '') {
        this.polyEditor.open()
      }
    },
    yyy() {
      if (this.polyEditor) {
        this.polyEditor.close()
      }
    },
    saveBorderLine() {
      if (this.borderStr === '') {
        console.log('请绘制边界线', this.$message)

        this.$message.error('请绘制边界后再保存')
        return
      }
      if (!this.borderStr) {
        this.$message.error('请编辑结束后保存边界！！！')
        return
      }
      this.$emit('border', this.borderStr)
      this.borderLine = false
      this.borderStr = ''
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="less">
.amap-sug-result {
  z-index: 10002;
  border: 0;
}
.scoped-drawer {
  .ant-drawer-wrapper-body,
  #amap-yykj-container,
  .map-wrapper {
    width: 100%;
    height: 100%;
  }

  .ant-drawer-wrapper-body {
    .ant-drawer-body {
      height: calc(100% - 55px);

      .map-wrapper {
        position: relative;

        #map-content {
        }

        .submit-btn {
          position: absolute;
          top: 0;
          width: 100%;
        }

        .input-card-map {
          display: flex;
          flex-direction: column;
          min-width: 0;
          word-wrap: break-word;
          background-color: #fff;
          background-clip: border-box;
          border-radius: 0.25px;
          width: 22px;
          border-width: 0;
          border-radius: 0.4px;
          box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
          position: fixed;
          bottom: 1px;
          right: 1px;
          -ms-flex: 1 1 auto;
          flex: 1 1 auto;
          padding: 0.75px 1.25px;

          .btn-map {
            :hover {
              :hover {
                color: #fff;
                background-color: #25a5f7;
                border-color: #25a5f7;
              }

              :hover {
                text-decoration: none;
              }
            }

            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out;
            background-color: transparent;
            background-image: none;
            color: #25a5f7;
            border-color: #25a5f7;
            padding: 0.25px 0.5px;
            line-height: 1.5;
            border-radius: 1px;
            -webkit-appearance: button;
            cursor: pointer;
          }

          .btn:hover {
            color: #fff;
            background-color: #25a5f7;
            border-color: #25a5f7;
          }

          .btn:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}
</style>
<style scoped></style>
